<template>
  <section @keydown.enter="submitForm" class="login-page fullScreen">
    <el-row align="middle" class="login-background" justify="center" type="flex">
      <el-row align="middle" class="login-main" justify="center" type="flex">
        <section class="login-logo">
          <img class="login-logo-img" src="@/assets/images/common/preview-logo.png" />
          <hr align="center" style="margin-top:-65px" width="220px" />
          <div class="login-logo-title">{{ appConfig.name }}</div>
        </section>
        <el-form :model="loginModel" class="login-form" ref="login-form">
          <el-row>
            <div style="font-size:18px;color:#265BB0;margin-top:26px;margin-left:28px;">
              登录
            </div>
            <hr />
          </el-row>
          <el-row class="form-item" justify="center" style="margin-top:20px" type="flex">
            <el-form-item prop="userName">
              <el-input auto-complete="off" placeholder="账号" v-model="loginModel.userName">
                <template slot="prefix">
                  <svg-icon :iconSize="22" iconName="yonghuming" style="margin-top:8px"></svg-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row class="form-item" justify="center" type="flex">
            <el-form-item prop="password">
              <el-input placeholder="密码" type="password" v-model="loginModel.password">
                <template slot="prefix">
                  <svg-icon :iconSize="22" iconName="mima" style="margin-top:8px"></svg-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-row>
          <!-- <el-row type="flex" justify="center">
           <el-form-item>
          <verify-code ref="verify-code"></verify-code>
          </el-form-item>
          </el-row>-->
          <el-row class="form-item" justify="center" type="flex">
            <el-form-item class="remember">
              <el-checkbox class="remember_cb" v-model="remember">记住用户名和密码</el-checkbox>
            </el-form-item>
          </el-row>
          <el-row justify="center" type="flex">
            <el-form-item label-width="0px" style="text-align:center">
              <el-button @click="$refs['login-form'].resetFields()" class="reset-button btn btns">重置</el-button>
              <el-button @click="submitForm" class="btn">登录</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
      <el-row class="copyright">
        <!-- 上海指旺信息科技有限公司 © 版权所有 -->
      </el-row>
    </el-row>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import AppConfig from "~/config/app.config";
import Component from "vue-class-component";

import VerifyCode from "~/components/common/verify-code.vue";
import { Action, State, namespace } from "vuex-class";
import { Dependencies } from "~/core/decorator";
import { setCookie, StorageService } from "~/utils/storage.service";
import { LoginService } from "~/services/management-service/login.service";
const workspaceModule = namespace("workspace");

@Component({
  components: {
    VerifyCode
  }
})
export default class Login extends Vue {
  @Dependencies(LoginService)
  private loginService: LoginService;
  @workspaceModule.Mutation private updateMessageBoxVisible;
  @workspaceModule.Mutation private updatedIsMessageShow;

  @Action("updateUserLoginData")
  private updateUserLoginData;
  @Action("updateResourcesData")
  private updateResourcesData;
  @State private menuResource;
  private appConfig: any = AppConfig;
  private remember: boolean = false;

  private submitLoading: boolean = false;

  private rules: any = {
    userName: { required: true, message: "用户名不能为空", trigger: "blur" },
    password: { required: true, message: "密码不能为空", trigger: "blur" }
  };
  private loginModel: any = {
    userName: "",
    password: ""
  };

  private loginForm: any = {};
  private verifyForm: any = {};
  private rember: any = {};
  public async login () {
    return new Promise((resolve, reject) => {
      this.loginService.login(this.loginModel).subscribe(
        data => {
          resolve(data);
        },
        error => {
          reject();
        }
      );
    });
  }

  /**
   * 提交登录表单
   */
  public async submitForm () {
    this.submitLoading = true;
    this.loginForm = this.$refs["login-form"];
    this.loginForm.validate(success => {
      if (!success) {
        return;
      }

      this.verifyForm = this.$refs["verify-code"];

      if (this.remember) {
        StorageService.setItem("remember", this.loginModel);

      } else {
        StorageService.removeItem("remember");
      }
      // 用户登录
      this.loginService.login(this.loginModel).subscribe(user => {
        // console.log('user', user, process.env.VUE_APP_DOMAIN);
        setCookie('userToken', user.token, { domain: process.env.VUE_APP_DOMAIN })

        // 更新登录数据
        this.updateUserLoginData(user);

        // 根据角色列表获取资源
        this.loginService.getAllResourcesByRoleId(user).subscribe(resources => {
          // 更新资源信息
          this.updateResourcesData(resources);
          this.submitLoading = false;

          // 跳转到菜单的第一个子菜单
          const tree = this.getRoleTreeData();
          const url =
            tree.length && tree[0].children.length
              ? tree[0].children[0].url
              : "";
          this.$router.push(url);
          this.updateMessageBoxVisible(false);
          this.updatedIsMessageShow(false);
        });
      });
    });
  }

  private getRoleTreeData () {
    const option = {
      keyName: "id",
      parentKeyName: "parent",
      sortKey: "resoSort"
    };
    return this.$common.generateTreeData(this.menuResource, option);
  }

  private mounted () {
    this.rember = StorageService.getItem("remember");
    this.remember = !!this.rember;
    if (this.rember) {
      this.loginModel = this.rember;
    }
  }
}
</script>

<style lang="less" scoped>
.login-page.fullScreen {
  .el-input--prefix .el-input__inner {
    padding-left: 45px;
  }
}
</style>

<style lang="less" scoped>
.fullScreen {
  width: 100%;
  height: 100%;
}

.login-background {
  background: url('../assets/images/common/login_bg.jpg');
  background-repeat: round;
  height: 100%;
}

.login-main {
  height: 380px;
  border-radius: 3px;
}

.login-logo {
  width: 268px;
  height: 380px;
  background-color: #1671c5;
  border-radius: 3px 0 0 3px;
}

.login-logo-img {
  // display: block;
  // width: 140px;
  // height: 94px;
  // margin: 0 auto;
  // margin-top: 46px;
  // margin-bottom: 110px;
  display: block;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 110px;
}
.login-logo-title {
  color: #ffffff;
  width: 267px;
  height: 14px;
  font-size: 14px;
  line-height: 12px;
  margin-top: 30px;
  margin-left: 40px;
  letter-spacing: 12px;
}
.login-form {
  width: 425px;
  height: 380px;
  border-radius: 0px 3px 3px 0px;
  background-color: #ffffff;
}

.el-form-item {
  width: 366px;
  height: 44px;
}

.btn {
  width: 173px;
  height: 35px;
  padding: 0px 20px;
}

.form-item {
  height: 55px;
}

.remember {
  text-align: left;
  color: red;
}

.remember_cb {
  color: #333;
}
.copyright {
  position: absolute;
  bottom: 60px;
  font-size: 14px;
  color: #91918e;
}
.btns {
  background-color: white !important;
  color: #265bb0 !important;
}
</style>
